<script setup lang="ts">
import { ref, onMounted, reactive } from "vue"
import { BasicLayout } from "@/components/Page";

import { Plus, Search } from "@element-plus/icons-vue";
import { PureTableBar } from "@/components/RePureTableBar";
import { useColumns } from "./utils/columns";
import createDept from "./components/dialog/createDept.vue";
// import { updateEnableStatus } from "@/api/lot/model/useColumns";
import { message } from "@/utils/message";
import { useRouter } from "vue-router";
const {
  listQuery,
  columns,
  pagination,
  getList,
  handleSizeChange,
  handleCurrentChange,
  handleFilter,
  listLoading,
  listData,
  handleDelete,
  dialogDeleteVisible,
  confirmDelete
} = useColumns();
defineOptions({
  name: "Monitoring"
});
const treeData = reactive([
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    label: 'Level one 3',
    children: [
      {
        label: 'Level two 3-1',
        children: [
          {
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        label: 'Level two 3-2',
        children: [
          {
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
])
const defaultProps = {
  children: 'children',
  label: 'label',
}
const nodeClick = node => {
  console.log(node)
} 
</script>

<template>
  <div>
    <basic-layout-header :treeData="treeData" :defaultProps="defaultProps" @nodeClick="nodeClick"
      placeholderTree="请输入设备位置搜索">
      <!-- 顶部 -->
      <template #header>
        <div class="device-header">
          <div>
            <div>
              <img style="width: 66px;" src="@/assets/image/sxjzs.png" />
              <span>摄像机总数</span>
            </div>
            <span>213</span>
            <img src="@/assets/image/sxt-bg.png" class="sxt-bg" />
          </div>
          <div>
            <div>
              <img src="@/assets/image/zxsb.png" />
              <span>在线数量</span>
            </div>
            <span>21</span>
          </div>
          <div>
            <div>
              <img src="@/assets/image/lxsb.png" />
              <span>离线设备</span>
            </div>
            <span>13</span>
          </div>
          <div>
            <div>
              <img src="@/assets/image/gzsb.png" />
              <span>故障设备</span>
            </div>
            <span>13</span>
          </div>
        </div>
      </template>
      <!-- 如果自定义树内容 -->
      <!-- <template #tree></template> -->
      <!-- 树结构操作按钮 -->
      <template #search>
        <div class="search-left">
          <el-form :model="listQuery" inline>
            <el-form-item>
              <el-input style="width: 400px;" :suffix-icon="Search" v-model="listQuery.name"
                placeholder="请输入设备编号、名称、IP地址或位置等关键字进行搜索" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <!-- 表格 -->
      <template #tableContent>
        <PureTableBar :columns="columns" @refresh="getList" title="列表设置">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table default-expand-all ref="tableRef" row-key="id" adaptive table-layout="auto"
              :loading="listLoading" :size="size" :data="listData" :columns="dynamicColumns"
              :pagination="{ ...pagination, size }" :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }" @page-size-change="handleSizeChange" @page-current-change="handleCurrentChange">
              <template #status="{ row }">
                <el-tag style="background: transparent;" key="item" type="success" effect="plain">
                  在线
                </el-tag>
              </template>
              <template #operation="{ row }">
                <el-button class="reset-margin" link type="primary" @click="openAddEditDialog(row)">
                  详情
                </el-button>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </template>
    </basic-layout-header>
  </div>

</template>
<style lang="scss" scoped>
.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  gap: 20px;

  &>div {
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: #eee;
    border-radius: 8px;
    flex: 1;
    border: 1px solid #E3E7F0;
    font-size: 16px;
    color: #1F2329;
    min-width: 300px;
    position: relative;
    overflow: hidden;

    .sxt-bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 250px;
    }

    &:nth-child(1) {
      color: #fff;
      background: var(--el-color-primary) // linear-gradient(to bottom, #D0E1F8 0%, #DDE7F7 50%, #E9EEF6 100%);
    }

    &:nth-child(2) {
      background: linear-gradient(to top, #F8F9FB 0%, #CDF5E0 100%);
    }

    &:nth-child(3) {
      background: linear-gradient(to top, #F8F9FB 0%, #F9F0DE 100%);
    }

    &:nth-child(4) {
      background: linear-gradient(to top, #F8F9FB 0%, #FFEFEF 100%);
    }

    &>div {
      display: flex;
      align-items: center;

    }

    &>span {
      font-weight: bold;
      font-size: 36px;
      // color: #1F2329;
    }

    img {
      width: 80px;
      margin-right: 15px;
    }
  }
}
</style>